<template>
  <form-panel :ok-click="submitForm">
    <div class="layout-flex-normal margin-top-37">
      <div class="layout-flex-normal-left">
        <div>
          <div class="text-white">监测项目</div>
          <split-vline class="margin-left-15 margin-right-15" />
          <add-button class="margin-left-8" :on-click="showInput"></add-button>
        </div>
        <list-view :list="itemList" :click-row="handleItemClick">
          <template #title="{ row }">
            <div>
              {{ row.title }}
              <i class="el-icon-delete" style="color: #5ed1ff; float: right; margin-right: 20px; margin-top: 12px"></i>
            </div>
          </template>
        </list-view>
      </div>
      <div class="layout-flex-normal-center">
        <div class="edit-page-input">
          <el-form ref="elForm" :model="queryObj" :rules="rules" size="medium" label-width="150px" label-suffix="：">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="监测项目" prop="field101">
                  <el-select
                    v-model="queryObj.field101"
                    placeholder="请输入监测项目"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="预警上限" prop="field103">
                  <el-input
                    v-model="queryObj.field103"
                    placeholder="请输入预警上限"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="超标上限" prop="field105">
                  <el-input
                    v-model="queryObj.field105"
                    placeholder="请输入超标上限"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="数据精度" prop="field106">
                  <el-input
                    v-model="queryObj.field106"
                    placeholder="请输入数据精度"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="启用状态" prop="field111">
                  <el-radio-group v-model="queryObj.field111" size="medium">
                    <el-radio
                      v-for="(item, index) in field111Options"
                      :key="index"
                      :label="item.value"
                      :disabled="item.disabled"
                      >{{ item.label }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="备注" prop="field112">
                  <el-input
                    v-model="queryObj.field112"
                    type="textarea"
                    placeholder="请输入备注"
                    :autosize="{ minRows: 4, maxRows: 4 }"
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
  </form-panel>
</template>

<script>
export default {
  name: 'MonitorItems',
  data() {
    return {
      queryObj: {
        field101: undefined,
        field103: undefined,
        field105: undefined,
        field106: undefined,
        field111: undefined,
        field112: undefined
      },
      rules: {
        field101: [
          {
            required: true,
            message: '请输入监测项目',
            trigger: 'change'
          }
        ],
        field103: [
          {
            required: true,
            message: '请输入预警上限',
            trigger: 'blur'
          }
        ],
        field105: [
          {
            required: true,
            message: '请输入超标上限',
            trigger: 'blur'
          }
        ],
        field106: [
          {
            required: true,
            message: '请输入数据精度',
            trigger: 'blur'
          }
        ],
        field111: [
          {
            required: true,
            message: '启用状态不能为空',
            trigger: 'change'
          }
        ],
        field112: [
          {
            required: true,
            message: '请输入备注',
            trigger: 'blur'
          }
        ]
      },
      field111Options: [
        {
          label: '启用',
          value: 1
        },
        {
          label: '停用',
          value: 2
        }
      ],
      itemList: [{ title: '水位' }, { title: '水位' }, { title: '水位' }, { title: '水位' }, { title: '水位' }]
    }
  },
  methods: {
    handleItemClick(row) {},
    showInput() {},
    submitForm() {
      this.$refs.elForm.validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs.elForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/pages/index.scss';
</style>
